<template>
  <el-dialog
    class="dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :width="dialogWidth"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="dialog-header">
      <slot name="header">
        <div class="dialog-header-title">
          <SvgIcon class="dialog-header-icon" :name="icon" v-if="icon" />{{
            title
          }}
        </div>
      </slot>
      <span v-if="showClose" @click="handleClose">
        <i class="dialog-header-close el-icon-close"></i>
      </span>
    </div>
    <div class="dialog-body">
      <slot></slot>
    </div>
    <div class="dialog-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    showClose: {
      default: true
    },
    size: {
      type: String,
      default: ''
    }
  },
  computed: {
    dialogWidth() {
      if (this.$attrs.width) {
        return this.$attrs.width
      }
      if (this.size === 'large') {
        return '800px'
      }
      return '500px'
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.dialog {
  .dialog-header {
    height: 55px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $colorBorder1;
    .dialog-header-icon {
      color: $colorPrimary;
      margin-right: 12px;
    }
    .dialog-header-title {
      font-size: 18px;
      color: $colorText1;
    }
    .dialog-header-close {
      font-size: 18px;
      cursor: pointer;
      color: $colorText1;
      &:hover {
        color: $colorPrimary;
      }
    }
  }
  .dialog-body {
    padding: 0.5rem;
  }
  .dialog-footer {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    // border-top: 1px solid $colorBorder1;
    ::v-deep.el-button {
      min-width: 98px;
    }
  }
}
</style>
